<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <!--<script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>-->
    <link rel="stylesheet" href="css/swiper.min.css" />
    <!--<script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>-->
    <style>
	    body{margin: 0;}
			.floor-nav{
				height: 50px;
				width: 400px;
				text-align: center;
				position: fixed;
				left: 0;
				z-index: 999;
				background-color: #FFFFFF;
				display: -webkit-box;
	            overflow-x: scroll;
	            -webkit-overflow-scrolling:touch;
			}
			.scroll-nav{
				background: #fff;
				width: 75px;
				height: 50px;
				line-height: 50px;
				cursor: pointer;
			}
			.scroll-nav.active{ color: #2A2A2A; background: yellow; font-weight: bold; }
			.scroll-floor{width: 100%;height: 500px;color: #fff;text-align: center;line-height: 500px;font-size: 50px;}
			.floor1{background: red;}
			.floor2{background: lightgreen;}
			.floor3{background: lightskyblue;line-height: 250px;}
			.floor4{background: lawngreen;}
			.floor5{background: lightcoral;}
			.more{
				width: 200px;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				background: #eee;
				color: #555;
				border-radius: 25px;
				margin: 0 auto;
			}
			.content {
				padding-top: 60px;
			}
	</style>
</head>
<body>
	<nav class="floor-nav">
		<div class="scroll-nav active">热门</div>
		<div class="scroll-nav">亚洲</div>
		<div class="scroll-nav">美洲</div>
		<div class="scroll-nav">大洋洲</div>
		<div class="scroll-nav">欧洲</div>
		<div class="scroll-nav">非洲</div>
		<!--<div class="scroll-nav">F7</div>
		<div class="scroll-nav">F8</div>
		<div class="scroll-nav">F9</div>
		<div class="scroll-nav">F10</div>-->
	</nav>
	<div class="content">
		<div class="scroll-floor floor1">一楼商品区</div>
		<div class="scroll-floor floor2">二楼商品区</div>
		<div class="scroll-floor floor3">三楼商品区</div>
		<div class="scroll-floor floor4">四楼商品区</div>
		<div class="scroll-floor floor5">五楼商品区</div>
		<div class="scroll-floor floor3">
		六楼评论区
		<p class="more">查看更多评论</p>
		</div>
		<!--<section class="scroll-floor floor1">七楼商品区</section>
		<section class="scroll-floor floor4">八楼商品区</section>
		<section class="scroll-floor floor5">九楼商品区</section>
		<section class="scroll-floor floor2">十楼商品区</section>-->
	</div>
</body>
<script type="text/javascript" src="js/thirdparty/jquery-3.3.1.js" ></script>
<script type="text/javascript" src="js/thirdparty/jquery.scroll.floor.js" ></script>
  <script type="text/javascript">
//  $('.more').click(function(){
//		$(this).hide();
//		$('.floor3').eq(1).css('height',2000);
//	});
//	scrollFloor({
//		floorClass : '.scroll-floor',       //楼层盒子class;默认为'.scroll-floor'
//		navClass : '.scroll-nav',           //导航盒子class;默认为'.scroll-nav'
//		activeClass : 'active',             //导航高亮class;默认为'active'
//		delayTime:300,                      //点击导航，滚动条滑动到该位置的时间间隔;默认为200
//		activeTop:200,                      //楼层到窗口的某个位置时，导航高亮（设置该位置）;默认为100
//		scrollTop:0                         //点击导航，楼层滑动到窗口的某位置;默认为100
//	});
	//基本队列
    function Queue() {
        
        //初始化队列（使用数组实现）
        var items = [];

        //向队列（尾部）中插入元素
        this.enqueue = function(element) {
            items.push(element);
        }

        //从队列（头部）中弹出一个元素，并返回该元素
        this.dequeue = function() {
            return items.shift();
        }

        //查看队列最前面的元素（数组中索引为0的元素）
        this.front = function() {
            return items[0];
        }

        //查看队列是否为空，如果为空，返回true；否则返回false
        this.isEmpty = function() {
            return items.length == 0;
        }

        //查看队列的长度
        this.size = function() {
            return items.length;
        }

        //查看队列
        this.print = function() {
            //以字符串形势返回
            return items.toString();
        }
    }

    //循环队列
    //@param Obj nameList 名单
    //@param Int num 指定的传递次数
    function hotPotato(nameList, num) {

        var queue = new Queue();

        //把名单插入队列
        for(var i = 0; i < nameList.length; i++) {
            queue.enqueue(nameList[i]);
        }

        //淘汰者的名字初始值
        var eliminated = '';

        //当队列里的人数大于1人时，继续传递
        while(queue.size() > 1) {
            for(var i = 0; i < num; i++) {
                //每次把队列头部弹出的队员再次插入队列的尾部，行程一个循环队列
                queue.enqueue(queue.dequeue());
            }
            //当循环停止时，即到了指定的传递次数时，弹出队列头部的队员
            eliminated = queue.dequeue();
            console.log(eliminated + '被淘汰');
        }

        //当队列中只剩下一个队员时，即是胜利者
        return queue.dequeue();
    }

    var names = ['dee', 'death mask', 'saga', 'mu', 'alexis'];
    var winner = hotPotato(names, 7);
    console.log('胜利者是' + winner);
  </script>
</html>